<template>
	<view class="warp-index">
		<view class="index-top">
			<view class="top-tx-box">
				<image style="width: 100rpx;height: 100rpx;" src="../../static/images/my_logo.png" mode=""></image>
				<view class="user-bar">王村</view>
				<text>王村</text>
			</view>
			<view class="index-top-info">
				<view class="info-bar">
					<view class="count">0</view>
					<view class="info-bottom">未读通知</view>
				</view>
				<view class="info-bar">
					<view class="count">1</view>
					<view class="info-bottom">整改任务</view>
				</view>
			</view>
		</view>
		<view class="index-group">
			<view class="group-title">
				巡查上报
				<image style="width: 40rpx;margin-left: 20rpx;" src="../../static/images/index_icon1.png" mode="widthFix"></image>
			</view>
			<view class="index-group-info">
				<view class="group-info-bar">
					<image style="width: 70rpx;" src="../../static/images/index_grid_icon1.png" mode="widthFix"></image>
					<text>农村人居</text>
				</view>
				<view class="group-info-bar">
					<image style="width: 70rpx;" src="../../static/images/index_grid_icon2.png" mode="widthFix"></image>
					<text>单位采集</text>
				</view>
				<view class="group-info-bar">
					<image style="width: 70rpx;" src="../../static/images/index_grid_icon3.png" mode="widthFix"></image>
					<text>单位改造</text>
				</view>
			</view>
		</view>
		<view class="index-group">
			<view class="group-title">
				处理反馈
				<image style="width: 40rpx;margin-left: 20rpx;" src="../../static/images/index_icon1.png" mode="widthFix"></image>
			</view>
			<view class="index-group-info">
				<view class="group-info-bar">
					<image style="width: 70rpx;" src="../../static/images/index_grid_icon1.png" mode="widthFix"></image>
					<text>农村人居</text>
				</view>
				
			</view>
		</view>
		<view class="index-group">
			<view class="group-title">
				辅助功能
				<image style="width: 40rpx;margin-left: 20rpx;" src="../../static/images/index_icon1.png" mode="widthFix"></image>
			</view>
			<view class="index-group-info">
				<view class="group-info-bar">
					<image style="width: 70rpx;" src="../../static/images/index_grid_icon1.png" mode="widthFix"></image>
					<text>农村人居</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.warp-index{
		width: 100%;
		height: 100%;
	}
	.index-top{
		width: 100%;
		height: 350rpx;
		background: #409eff;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.top-tx-box{
		width: 100%;
		height: 33%;
		display: flex;
		align-items: center;
	}
	.top-tx-box text{
		color: #fff;
		font-size: 28rpx;
	}
	.user-bar{
		color: #fff;
		font-size: 38rpx;
		margin: 0 35rpx 0 20rpx;
	}
	.index-top-info{
		width: 100%;
		height: 65%;
		display: flex;
	}
	.info-bar{
		width: 50%;
		display: flex;
		flex-direction: column;	
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	.count{
		font-size: 70rpx;
	}
	.info-bottom{
		font-size: 32rpx;
		margin-top: 10rpx;
	}
	.index-group{
		width: 100%;
		height: auto;
	}
	.group-title{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #eee;
		color: #8a8a8a;
		font-size: 32rpx;
	}
	.index-group-info{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
	}
	.group-info-bar{
		width: 32%;
		height: 230rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-right: 1px solid #eee;
	}
	.group-info-bar text{
		color: #8A8A8A;
		font-size: 32rpx;
		margin-top: 20rpx;
	}
</style>
